
window.onload = function(){ //页面加载完后开始
    document.onscroll = function(){ //滚动条滚动后触发
        //获取滚动条位置
        let scroll = document.documentElement.scrollTop
        console.log(scroll)
        //获取视口宽度
        let width = document.documentElement.clientWidth;
        //获取顶部固定块
        let headerwrapper = document.getElementById('header-wrapper');
        let header = document.getElementById('header');
        let img = document.getElementById('header-img')
        //判断滚动条超过视口宽度的12%时，
        if(scroll>0){
            header.style.setProperty("animation","self-def 200ms linear")
            header.style.setProperty("animation-fill-mode","forwards")
            img.style.setProperty("animation","self-def-img 200ms linear")
            img.style.setProperty("animation-fill-mode","forwards")

        }else{
            header.style.setProperty("animation","self-def2 200ms linear")
            header.style.setProperty("animation-fill-mode","forwards")
            img.style.setProperty("animation","self-def-img2 200ms linear")
            img.style.setProperty("animation-fill-mode","forwards")
        }

    }
}